<template>
    <div class="customDialogBox">
        <div class="toolbars" v-if="currentView !='IndexList'">
            <template v-if="currentView=='IndexList'">
                <a-button @click.stop="addIndex" type="primary">
                    <i class="iconfont iconadd"></i>
                    {{$ti18('rxList.newBtn','添加')}}
                </a-button>
            </template>
            <template >
                <a-button @click.stop="save(false)" type="primary">
                    {{$ti18('rxForm.saveBtn','保存')}}
                </a-button>
                <a-button @click.stop="save(true)">
                    {{i18n('list.saveAndAdd','保存并继续添加')}}
                </a-button>
                <a-button @click.stop="back">
                    {{$ti18('rxForm.return','返回')}}
                </a-button>
            </template>
        </div>
        <div class="contentContainer">
            <div class="contentContainerRoll">
                <component
                    ref="indexView"
                    :is="currentView"
                    :entityId="entityId"
                    @addIndex="addIndex"
                    :fields="fields"
                ></component>
            </div>
        </div>
    </div>
</template>

<script>
import IndexList from "./indexList";
import indexEdit from "./indexEdit";
import FormDbApi from "@/api/form/bo/formDb";

export default {
    name: "indexComponent",
    props: {
        layerid: String,
        lydata: Object,
        destroy: Function,
        entityId: String,
        tableName: String,
        dsAlias: String
    },
    components:{
        IndexList,
        indexEdit
    },
    data() {
        return {
            currentView:"IndexList",
            fields:[]
        }
    },
    created() {
        if(this.tableName){
            this.getFields();
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formDb",key);
        },
        getFields(){
            FormDbApi.getByName("dsName="+this.dsAlias+"&tbName="+this.tableName).then(res=>{
                if(res.columnList){
                    this.fields=res.columnList;
                }
            })
        },
        addIndex(){
            if(this.$refs.indexView.indexList && this.$refs.indexView.indexList.length>=4){
                this.$message.warning(this.i18n('msg.addMsg',"只允许添加四个表索引！"));
                return;
            }
            this.currentView="indexEdit";
        },
        save(isContinue){
            this.$refs.indexView.saveIndex(isContinue,this.back);
        },
        back(){
            this.currentView="IndexList";
        },
    },
    watch: {}
}
</script>

<style scoped>
.customDialogBox{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.toolbars{
    border-bottom: 1px solid #ddd;
    text-align: right;
    padding: 10px;
    font-size: 0;
}
.toolbars button:not(:last-child){
    margin-right: 6px;
}
.contentContainer{
    flex: 1;
    position: relative;
}
.contentContainerRoll{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
}
</style>